<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/jd-index.css"/>
</head>
<body>
<!--1.页面顶部#top-->
<header id="top">
    页面顶部
</header>
<!--2.LOGO和搜索#top_main-->
<div id="top_main">LOGO和搜索</div>
<!--3.页面导航#nav-->
<nav id="nav">页面导航</nav>
<!--4.banner广告#banner-->
<div id="banner">
    <!-- 1.左侧的分类信息 -->
    <ul id="cate_box">
        <li>
            <p>
                <a href="#">图书、音像、数字商品</a>
            </p>
        </li>
        <li>
            <p>
                <a href="#">家用电器</a>
            </p>
        </li>
    </ul>
</div>
<!--5.页面主体内容#main-->
<section id="main">
    <!-- 1.生活橱窗 -->
    <div id="show_box">
        <!-- (1)文本：生活的橱窗 -->
        <p>
            生活的橱窗
            <i>每一天展示精彩</i>
        </p>
        <!-- (2)八块展示 -->
        <ul>
            <!-- 第一块 -->
            <li class="pinpaijie">
                <!-- 遮罩层 -->
                <p class="zhezhao"></p>
                <!-- 文字介绍 -->
                <div class="text">
                    <h2>品牌街</h2>
                    <h3>三星note</h3>
                    <h4>赠500京东易卡</h4>
                    <ul>
                        <li>
                            <i></i>
                            <a href="#">更多品牌</a>
                        </li>
                        <li>
                            <i></i>
                            <a href="#">进入品牌街</a>
                        </li>
                    </ul>
                </div>
            </li>
            <!-- 第二块 -->
            <li class="tiantiandijia">
                <!-- 遮罩层 -->
                <p class="zhezhao"></p>
                <!-- 文字介绍 -->
                <div class="text">
                    <h2>天天低价</h2>
                    <h3>坚果礼盒</h3>
                    <span>95.8元秒杀</span>

                </div>
            </li>
            <!-- 第三块 -->
            <li class="haodongxi">
                <!-- 遮罩层 -->
                <p class="zhezhao"></p>
                <!-- 文字介绍 -->
                <div class="text">
                    <h2>好东西</h2>
                    <h3>罗技蓝牙键盘</h3>
                    <h4>舒适键入249</h4>
                    <ul>
                        <li>
                            <i></i>
                            <a href="#">键鼠送红包</a>
                        </li>
                        <li>
                            <i></i>
                            <a href="#">逛更多>></a>
                        </li>
                    </ul>
                </div>
            </li>
            <!-- 第四块 -->
            <li class="jinrituangou">
                <!-- 遮罩层 -->
                <p class="zhezhao"></p>
                <!-- 文字介绍 -->
                <div class="text">
                    <h2>今日团购</h2>
                    <h3>100元代金券</h3>
                    <div>
                        团购价<b>&yen;89</b>
                        <p>
                            <img src="img/index/cantuan.png" alt="">
                        </p>
                    </div>
                </div>
            </li>
            <!-- 第五块 -->
            <li class="jingdongshoufa">
                <!-- 遮罩层 -->
                <p class="zhezhao"></p>
                <!-- 文字介绍 -->
                <div class="text">
                    <h2>京东首发</h2>
                    <h3>MOTO X</h3>
                    <ah>强势回归现货抢</ah>
                </div>
            </li>
            <!-- 第六块 -->
            <li class="youhuiquan">
                <!-- 遮罩层 -->
                <p class="zhezhao"></p>
                <!-- 文字介绍 -->
                <div class="text">
                    <h2>优惠券</h2>
                    <h3>意尔康男鞋</h3>
                    <h4>百元神券限量送</h4>
                </div>
            </li>
            <!-- 第七块 -->
            <li class="jingdongyushou">
                <!-- 遮罩层 -->
                <p class="zhezhao"></p>
                <!-- 文字介绍 -->
                <div class="text">
                    <h2>京东预售</h2>
                    <h3>磁带蓝牙音箱</h3>
                    <sh>送小米手环</sh>
                </div>
            </li>
            <!-- 第八块 -->
            <li class="jinrongjingxuan">
                <!-- 遮罩层 -->
                <p class="zhezhao"></p>
                <!-- 文字介绍 -->
                <div class="text">
                    <h2>金融精选</h2>
                    <h3>打白条0元购</h3>
                    <h4>iPhone 6分期购</h4>
                </div>
            </li>
        </ul>
        <div>
            <img src="img/index/ad_small_01.jpg" alt="">
            <img  class="mid"src="img/index/ad_small_02.jpg" alt="">
            <img src="img/index/ad_small_03.jpg" alt="">

        </div>
    </div>
</section>
<!--6.页面底部-配送方式#foot_box-->
<footer id="foot_box">
    <!-- 1.购物指南 -->
    <p class="shopping_guide"></p>
    <ul>
        <li>
            <b>购物指南</b>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
    </ul>
    <!-- 2.购物指南 -->
    <p class="send_type"></p>
    <ul>
        <li>
            <b>购物指南</b>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
    </ul>
    <!-- 3.购物指南 -->
    <p class="shopping_guide"></p>
    <ul>
        <li>
            <b>购物指南</b>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
    </ul>
    <!-- 4.购物指南 -->
    <p class="shopping_guide"></p>
    <ul>
        <li>
            <b>购物指南</b>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
    </ul>
    <!-- 5.购物指南 -->
    <p class="shopping_guide"></p>
    <ul>
        <li>
            <b>购物指南</b>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
        <li>
            <a href="#">购物流程</a>
        </li>
    </ul>
</footer>
<!--7.页面底部-备案号#footer-->
<footer id="footer">
    <!-- 1.链接 -->
    <div class="links">
        关于我们&nbsp; | &nbsp;联系我们&nbsp; | &nbsp;人才招聘&nbsp; | &nbsp;商家入驻&nbsp; | &nbsp;广告服务&nbsp; |&nbsp; 手机京东&nbsp; | &nbsp;友情链接&nbsp; | &nbsp;销售联盟&nbsp; | &nbsp;京东社区&nbsp; | &nbsp;京东公益
    </div>
    <div class="links">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">人才招聘</a>
        <a href="#">商家入驻</a>
        <a href="#">广告服务</a>
        <a href="#">手机京东</a>
        <a href="#">友情链接</a>
        <a href="#">销售联盟</a>
        <a href="#">京东社区</a>
        <a href="#" class="right_link">京东公益</a>
    </div>
    <!-- 2.版权信息 -->
    <div class="copyright">
        北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-非经营性-2011-0034<br />
        音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号<br />
        网络文化经营许可证京网文[2011]0168-061号 Copyright © 2004-2014 京东JD.com 版权所有<br />
        京东旗下网站： English Site 拍拍网 网银在线<br />
    </div>
    <!-- 3.四幅图 -->
    <div class="images">
        <a href="#">
            <img src="img/cx.jpg" alt="aaa">
        </a>
        <a href="#">
            <img src="img/cx.jpg" alt="aaa">
        </a>
        <a href="#">
            <img src="img/cx.jpg" alt="aaa">
        </a>
        <a href="#">
            <img src="img/cx.jpg" alt="aaa">
        </a>
    </div>
</footer>
</body>
</html>